<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const isLogin = ref(true)
const loading = ref(false)
const error = ref('')

const loginForm = reactive({
  email: '',
  password: '',
  remember: false
})

const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

function switchForm(type: 'login' | 'register') {
  isLogin.value = type === 'login'
}

function createParticles() {
  const container = document.getElementById('particles')
  if (!container) return
  
  for (let i = 0; i < 50; i++) {
    const particle = document.createElement('div')
    particle.className = 'particle'
    const size = Math.random() * 4 + 1
    particle.style.width = size + 'px'
    particle.style.height = size + 'px'
    particle.style.left = Math.random() * 100 + '%'
    particle.style.top = Math.random() * 100 + '%'
    particle.style.opacity = (Math.random() * 0.5).toString()
    
    // 添加浮动动画
    const animationDuration = Math.random() * 10 + 5
    particle.style.animation = `float ${animationDuration}s ease-in-out infinite`
    
    container.appendChild(particle)
  }
}

onMounted(() => {
  createParticles()
  initCanvas()
  animateConnections()
})

function initCanvas() {
  const canvas = document.getElementById('bgCanvas') as HTMLCanvasElement
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  
  const particles: any[] = []
  const particleCount = 100
  
  for (let i = 0; i < particleCount; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 2 + 1,
      color: '#4361ee',
      speedX: Math.random() * 0.5 - 0.25,
      speedY: Math.random() * 0.5 - 0.25
    })
  }
  
  function animate() {
    requestAnimationFrame(animate)
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    for (let i = 0; i < particleCount; i++) {
      const p = particles[i]
      
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2)
      ctx.fillStyle = p.color
      ctx.globalAlpha = 0.3
      ctx.fill()
      
      // 移动粒子
      p.x += p.speedX
      p.y += p.speedY
      
      // 边界检查
      if (p.x < 0 || p.x > canvas.width) p.speedX *= -1
      if (p.y < 0 || p.y > canvas.height) p.speedY *= -1
      
      // 绘制连接线
      for (let j = i + 1; j < particleCount; j++) {
        const p2 = particles[j]
        const distance = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2))
        
        if (distance < 100) {
          ctx.beginPath()
          ctx.moveTo(p.x, p.y)
          ctx.lineTo(p2.x, p2.y)
          ctx.strokeStyle = '#4361ee'
          ctx.globalAlpha = 0.1 * (1 - distance / 100)
          ctx.stroke()
        }
      }
    }
  }
  
  animate()
  
  window.addEventListener('resize', () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  })
}

function animateConnections() {
  // 动态生成连接线动画
  const lines = document.querySelectorAll('.connection-line')
  lines.forEach((line, index) => {
    const delay = index * 0.5
    // @ts-ignore
    line.style.animationDelay = `${delay}s`
  })
}

async function handleLogin() {
  if (loading.value) return
  
  if (!loginForm.email || !loginForm.password) {
    error.value = '请输入邮箱和密码'
    return
  }
  
  try {
    loading.value = true
    error.value = ''
    
    // 模拟登录
    setTimeout(() => {
      const mockUser = {
        id: 1,
        username: '测试用户',
        email: loginForm.email
      }
      
      const mockToken = 'mock-jwt-token-xxx'
      
      userStore.setToken(mockToken)
      userStore.setUserInfo(mockUser)
      
      if (loginForm.remember) {
        localStorage.setItem('rememberEmail', loginForm.email)
      }
      
      router.push('/home')
      
      loading.value = false
    }, 1000)
    
  } catch (e) {
    error.value = e instanceof Error ? e.message : '登录失败，请重试'
    loading.value = false
  }
}

async function handleRegister() {
  if (loading.value) return
  
  try {
    if (registerForm.password !== registerForm.confirmPassword) {
      error.value = '两次输入的密码不一致'
      return
    }
    
    loading.value = true
    error.value = ''
    
    // 模拟API调用
    setTimeout(async () => {
      try {
        // 这里是模拟代码，实际项目中应该调用真实API
        // const response = await fetch('/api/register', {
        //   method: 'POST',
        //   headers: { 'Content-Type': 'application/json' },
        //   body: JSON.stringify({
        //     username: registerForm.username,
        //     email: registerForm.email,
        //     password: registerForm.password
        //   })
        // })
        
        // 模拟成功注册
        // if (!response.ok) throw new Error('注册失败')
        // const data = await response.json()
        
        const mockUser = {
          id: 1,
          username: registerForm.username,
          email: registerForm.email
        }
        
        const mockToken = 'mock-jwt-token-xxx'
        
        userStore.setToken(mockToken)
        userStore.setUserInfo(mockUser)
        
        router.push('/')
      } catch (e) {
        error.value = e instanceof Error ? e.message : '注册失败，请重试'
      } finally {
        loading.value = false
      }
    }, 1000) // 模拟网络延迟
    
  } catch (e) {
    error.value = e instanceof Error ? e.message : '注册失败，请重试'
    loading.value = false
  }
}

function goToRegister() {
  isLogin.value = false
}

function goToLogin() {
  isLogin.value = true
}
</script>

<template>
  <div class="body-container">
    <!-- 动态背景 -->
    <div class="animated-bg">
      <div class="particles" id="particles"></div>
      <div class="collaboration-lines">
        <div class="line" style="top: 20%"></div>
        <div class="line" style="top: 40%"></div>
        <div class="line" style="top: 60%"></div>
        <div class="line" style="top: 80%"></div>
      </div>
      <div class="tech-circle" style="width: 300px; height: 300px; right: 10%; top: 20%"></div>
      <div class="tech-circle" style="width: 200px; height: 200px; left: 15%; bottom: 10%"></div>
      <div class="tech-circle" style="width: 150px; height: 150px; left: 40%; top: 15%"></div>
    </div>

    <!-- 品牌Logo -->
    <div class="brand-logo">
      <h1 class="logo-text">CoWork<span class="pro-text">Pro</span></h1>
    </div>

    <!-- 浮动卡片效果 -->
    <div class="floating-cards">
      <div class="floating-card card-1">
        <div class="card-content">
          <div class="card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
            </svg>
          </div>
          <div class="card-text">智能编辑</div>
        </div>
      </div>
      
      <div class="floating-card card-2">
        <div class="card-content">
          <div class="card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
              <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
            </svg>
          </div>
          <div class="card-text">数据安全</div>
        </div>
      </div>
      
      <div class="floating-card card-3">
        <div class="card-content">
          <div class="card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
          </div>
          <div class="card-text">实时协作</div>
        </div>
      </div>
      
      <div class="floating-card card-4">
        <div class="card-content">
          <div class="card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
            </svg>
          </div>
          <div class="card-text">云端存储</div>
        </div>
      </div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-container">
      <canvas id="bgCanvas" class="bg-canvas"></canvas>
      
      <div class="login-card" :class="{'shake-error': error}">
        <div v-if="error" class="error-message">{{ error }}</div>
        
        <!-- 登录表单 -->
        <div v-if="isLogin" class="form-wrapper">
          <div class="login-header">
            <h2 class="login-title">欢迎回来</h2>
            <p class="login-subtitle">登录您的协同办公账号</p>
          </div>
          
          <div class="form-container">
            <div class="form-item">
              <div class="form-label">邮箱</div>
              <div class="input-wrapper">
                <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                  <polyline points="22,6 12,13 2,6"></polyline>
                </svg>
                <input 
                  type="text" 
                  v-model="loginForm.email"
                  class="form-input" 
                  placeholder="请输入邮箱"
                >
              </div>
            </div>
            
            <div class="form-item">
              <div class="form-label">密码</div>
              <div class="input-wrapper">
                <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <input 
                  type="password" 
                  v-model="loginForm.password"
                  class="form-input" 
                  placeholder="请输入密码"
                >
              </div>
            </div>
            
            <div class="form-options">
              <label class="remember-option">
                <input 
                  type="checkbox" 
                  v-model="loginForm.remember" 
                  class="remember-checkbox"
                >
                <span>记住我</span>
              </label>
              <a href="#" class="forgot-link">忘记密码？</a>
            </div>
            
            <button 
              class="login-btn" 
              @click="handleLogin"
              :disabled="loading"
            >
              {{ loading ? '登录中...' : '登录' }}
              <svg v-if="!loading" class="btn-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M5 12h14"></path>
                <path d="M12 5l7 7-7 7"></path>
              </svg>
              <span class="btn-loader" v-else></span>
            </button>
            
            <div class="register-row">
              <span>还没有账号？</span>
              <a href="#" @click.prevent="goToRegister" class="register-link">立即注册</a>
            </div>
          </div>
        </div>
        
        <!-- 注册表单 -->
        <div v-else class="form-wrapper">
          <div class="login-header">
            <h2 class="login-title">创建账号</h2>
            <p class="login-subtitle">加入协同办公平台</p>
          </div>
          
          <div class="form-container">
            <div class="form-item">
              <div class="form-label">用户名</div>
              <div class="input-wrapper">
                <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                  <circle cx="12" cy="7" r="4"></circle>
                </svg>
                <input 
                  type="text" 
                  v-model="registerForm.username"
                  class="form-input" 
                  placeholder="请输入用户名"
                >
              </div>
            </div>
            
            <div class="form-item">
              <div class="form-label">邮箱</div>
              <div class="input-wrapper">
                <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                  <polyline points="22,6 12,13 2,6"></polyline>
                </svg>
                <input 
                  type="email" 
                  v-model="registerForm.email"
                  class="form-input" 
                  placeholder="请输入邮箱"
                >
              </div>
            </div>
            
            <div class="form-item">
              <div class="form-label">密码</div>
              <div class="input-wrapper">
                <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <input 
                  type="password" 
                  v-model="registerForm.password"
                  class="form-input" 
                  placeholder="请输入密码"
                >
              </div>
            </div>
            
            <div class="form-item">
              <div class="form-label">确认密码</div>
              <div class="input-wrapper">
                <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <input 
                  type="password" 
                  v-model="registerForm.confirmPassword"
                  class="form-input" 
                  placeholder="请再次输入密码"
                >
              </div>
            </div>
            
            <button 
              class="login-btn" 
              @click="handleRegister"
              :disabled="loading"
            >
              {{ loading ? '注册中...' : '注册' }}
              <svg v-if="!loading" class="btn-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M5 12h14"></path>
                <path d="M12 5l7 7-7 7"></path>
              </svg>
              <span class="btn-loader" v-else></span>
            </button>
            
            <div class="register-row">
              <span>已有账号？</span>
              <a href="#" @click.prevent="goToLogin" class="register-link">返回登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 连接线效果 -->
    <div class="connection-lines">
      <div class="connection-dot dot-1"></div>
      <div class="connection-dot dot-2"></div>
      <div class="connection-dot dot-3"></div>
      <div class="connection-dot dot-4"></div>
      <div class="connection-line line-1"></div>
      <div class="connection-line line-2"></div>
      <div class="connection-line line-3"></div>
    </div>
  </div>
</template>

<style>
/* 全局样式，防止滚动 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  height: 100vh;
  width: 100vw;
}
</style>

<style scoped>
.body-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #0A1628;
  height: 100vh;
  width: 100vw;
  overflow: hidden !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(45deg, #0A1628, #1A2B4B);
}

.brand-logo {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  text-align: left;
  transform: none;
}

.logo-text {
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.pro-text {
  color: #4361ee;
  background: linear-gradient(90deg, #4361ee, #7b96ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-container {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card {
  background: rgba(18, 30, 52, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(67, 97, 238, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(67, 97, 238, 0.15);
  padding: 40px;
  width: 380px;
  position: relative;
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.login-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(67, 97, 238, 0.2);
}

.form-wrapper {
  position: relative;
}

.login-header {
  text-align: center;
  margin-bottom: 20px;
}

.login-title {
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(90deg, #4361ee, #7b96ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.login-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.form-input {
  width: 100%;
  padding: 14px 12px 14px 45px;
  border: 1px solid rgba(67, 97, 238, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: white;
  font-size: 14px;
  transition: all 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: rgba(67, 97, 238, 0.5);
  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remember-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.remember-checkbox {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  accent-color: #4361ee;
}

.forgot-link {
  font-size: 13px;
  color: #7b96ff;
  text-decoration: none;
  transition: color 0.3s;
}

.forgot-link:hover {
  color: #4361ee;
  text-decoration: underline;
}

.login-btn {
  background: linear-gradient(90deg, #4361ee, #7b96ff);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.login-btn:after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: 0.5s;
}

.login-btn:hover:after {
  left: 100%;
}

.login-btn:disabled {
  background: linear-gradient(90deg, rgba(67, 97, 238, 0.5), rgba(123, 150, 255, 0.5));
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-icon {
  transition: transform 0.3s;
}

.login-btn:hover .btn-icon {
  transform: translateX(3px);
}

.btn-loader {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.register-row {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

.register-link {
  color: #7b96ff;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.3s;
}

.register-link:hover {
  color: #4361ee;
  text-decoration: underline;
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.collaboration-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  height: 1px;
  width: 100%;
  animation: moveLine 8s linear infinite;
}

@keyframes moveLine {
  0% { transform: translateY(-100%) rotate(45deg); }
  100% { transform: translateY(100%) rotate(45deg); }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.tech-circle {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.floating-cards {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.floating-card {
  position: absolute;
  background: rgba(25, 35, 60, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(67, 97, 238, 0.2);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  min-width: 180px;
}

/* 浮动卡片布局 - 调整大小和位置 */
.card-1 {
  width: 200px;
  height: 75px;
  top: 18%;
  left: 6%;
  transform: rotate(-5deg);
  animation: float1 12s ease-in-out infinite;
  z-index: 3;
}

.card-2 {
  width: 160px;
  height: 65px;
  top: 35%;
  left: 14%;
  transform: rotate(5deg);
  animation: float2 10s ease-in-out infinite;
  z-index: 2;
}

.card-3 {
  width: 190px;
  height: 70px;
  top: 52%;
  left: 5%;
  transform: rotate(-3deg);
  animation: float3 14s ease-in-out infinite;
  z-index: 4;
}

.card-4 {
  width: 170px;
  height: 68px;
  top: 69%;
  left: 12%;
  transform: rotate(3deg);
  animation: float4 11s ease-in-out infinite;
  z-index: 1;
}

.card-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.card-icon {
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(67, 97, 238, 0.15);
  border-radius: 8px;
  padding: 10px;
  width: 36px;
  height: 36px;
}

.card-text {
  color: rgba(255, 255, 255, 1);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 连接线效果 */
.connection-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.connection-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: rgba(67, 97, 238, 0.5);
  border-radius: 50%;
}

.dot-1 {
  top: 30%;
  left: 25%;
}

.dot-2 {
  top: 40%;
  right: 30%;
}

.dot-3 {
  bottom: 35%;
  left: 35%;
}

.dot-4 {
  top: 60%;
  right: 25%;
}

.connection-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(67, 97, 238, 0), rgba(67, 97, 238, 0.5), rgba(67, 97, 238, 0));
  transform-origin: left center;
  animation: draw 3s ease-in-out forwards;
  opacity: 0;
}

.line-1 {
  top: 30%;
  left: 25%;
  width: 200px;
  transform: rotate(30deg);
}

.line-2 {
  top: 40%;
  right: 30%;
  width: 180px;
  transform: rotate(-45deg);
}

.line-3 {
  bottom: 35%;
  left: 35%;
  width: 150px;
  transform: rotate(-15deg);
}

@keyframes draw {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0.7;
  }
}

.bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 错误消息 */
.error-message {
  background: rgba(255, 59, 48, 0.1);
  color: #ff453a;
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid #ff453a;
  margin-bottom: 15px;
  font-size: 13px;
}

.shake-error {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes float1 {
  0% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-15px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(-5deg); }
}

@keyframes float2 {
  0% { transform: translateY(0) rotate(5deg); }
  50% { transform: translateY(-20px) rotate(7deg); }
  100% { transform: translateY(0) rotate(5deg); }
}

@keyframes float3 {
  0% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-18px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(-3deg); }
}

@keyframes float4 {
  0% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
  100% { transform: translateY(0) rotate(3deg); }
}
</style> 